import React,{ Component } from 'react';
import {connect} from 'react-redux';
import {actions} from './_index.js';
import Item from './item.jsx';
class View extends Component{
    constructor(props){
        super(props);
    }
    lists(){
        const { data } = this.props;
        return data.map((val,index)=>{
            return(
                <Item key={index} id={val.id}/>
            )
        })
        // return lists;
    }
    render(){
        const { data,onAdd } = this.props;
        return(
            <React.Fragment>
                {data.length!==0?this.lists():''}
                <input type="button" onClick={()=>{onAdd()}} value="点击"/>
            </React.Fragment>
        )
    }
}
//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
const mapStateToProps = (state)=> {
  return {
      data:state.two
  }
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
	return {
		onAdd: () => dispatch(actions.add('id'))
	}
};

export default connect(mapStateToProps,mapDispatchToProps)(View);
